<script setup lang="ts">
import { ref } from 'vue';

const props: any = defineProps<{
    ujt?: any;
    asaidata: any;
    formdata: any;
    formkey: any;
}>();

const { $fn, $global, $model } = props.ujt;

const rfInputFile: any = ref(null);
const selectedFile: any = ref(null);
const message: any = ref('+');

const handleUploadFile = async (e: any) => {
    if (rfInputFile.value.value) {
        selectedFile.value = e.target.files[0];
        rfInputFile.value.value = '';
        if (!selectedFile.value) {
            message.value = $fn.lg('asai.fail');
            return;
        }
        const reader: any = new FileReader();
        reader.onload = async () => {
            const base64Data = reader.result.split(',')[1];
            try {
                $fn.api['webserver']
                    .apiPost(
                        '/api/asaifile/manage/upbase64/?path=' +
                            $global.sys.path.updir +
                            $fn.As.getName(selectedFile.value.name),
                        base64Data,
                        {
                            headers: {
                                'Content-Type': 'application/json',
                            },
                        }
                    )
                    .then((res: any) => {
                        message.value = '';
                        props.formdata[props.formkey] = res.data;
                    });
            } catch (error: any) {
                message.value = $fn.lg('asai.fail') + ' ' + error.message;
            }
        };
        reader.readAsDataURL(selectedFile.value);
    }
};
function clickUpload() {
    rfInputFile.value.click();
}
</script>

<template>
    <AsaiFormLabel
        :ujt="ujt"
        :asaidata="asaidata"
        :formdata="formdata"
        :formkey="formkey"
    >
        <div class="as-upload-image" @pointerdown.prevent="clickUpload">
            <div v-if="props.formdata[formkey]">
                <img
                    v-if="
                        asaidata?.rule?.[formkey]?.accept?.startsWith('image/')
                    "
                    :src="
                        $fn.As.getUrlByCfg($global.link.api['webserver']) +
                        '/' +
                        props.formdata[formkey]
                    "
                    :alt="props.formdata[formkey]"
                    :title="props.formdata[formkey]"
                />
                <div
                    class="as-upload-tit"
                    :title="props.formdata[formkey]"
                    v-else
                >
                    {{ props.formdata[formkey] }}
                </div>
            </div>
            <div
                v-else
                :class="message === '+' ? '' : 'as-upload-tit'"
                :title="message"
            >
                {{ message }}
            </div>
        </div>
        <input
            v-if="asaidata?.rule?.[formkey]?.accept"
            :accept="asaidata?.rule?.[formkey]?.accept"
            ref="rfInputFile"
            type="file"
            hidden
            @change="handleUploadFile"
        />
        <input
            v-else
            ref="rfInputFile"
            type="file"
            hidden
            @change="handleUploadFile"
        />
    </AsaiFormLabel>
</template>

<style scoped lang="scss">
.as-upload-image {
    width: 88px;
    height: 88px;
    border: 1px solid #ccc;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 58px;
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;
    img,
    div {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        max-width: 80px;
        max-height: 80px;
    }
    .as-upload-tit {
        font-size: 18px;
        color: #666;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
</style>
